<template>
	<view class="nft_container_bg">
		<view class="nftSpace">
			<!-- 上部分头像卡片 -->
			<view class="user_card">
				<view class="user_info">
					<!-- 头像 -->
					<view class="user_avatar">
						<image src="../../static/img/nft/eggplant.png" mode=""></image>
					</view>
					<!-- 信息 -->
					<view class="user_conent">
						<!-- title -->
						<view class="user_title">chen</view>
						<!-- info -->
						<view class="user_signature">为问世间醒眼是何人</view>
					</view>
				</view>
				<!-- 个人介绍 -->
				<view class="user_introduce">
					<u-read-more :showHeight="40" closeText="展开" :toggle="true" :shadowStyle="shadowStyle" color="var(--echo-main-color)">
						<rich-text :nodes="content"></rich-text>
					</u-read-more>
				</view>
			</view>
			<!-- 粉丝信息 -->
			<view class="fans">
				<view class="">
					<view class="num">1000</view>
					<view class="">获赞</view>
				</view>
				<view class="">
					<view class="num">1000</view>
					<view class="">粉丝</view>
				</view>
				<view class="">
					<view class="num">0</view>
					<view class="">已关注</view>
				</view>
			</view>
			<view class="focus">
				<u-button text="关注" color="var(--echo-main-color)" shape="circle" size="small"></u-button>
			</view>
			<!-- 下部分产品卡片 -->
			<view class="product_card">
				<u-tabs :list="productCardList" @click="tabChange" :inactiveStyle="{color: '#999'}"
				:activeStyle="{color: 'var(--echo-main-color)'}"
				lineColor="var(--echo-main-color)"></u-tabs>
				<view class="nft_lists_card" v-if="tabIndex === 0">
					<nft-card :nftName="item.nftName" v-for="item in neftList" :key="item.id" :item="item" :imgSrc="item.imgSrc"></nft-card>
				</view>
				<view class="nft_lists_card" v-else>222</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				content: "山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？",
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "30rpx",
				},
				productCardList: [{
					name: '藏品',
				}, {
					name: '作品',
				},
				{
					name: '贡献',
				}],
				tabIndex: 0,
				neftList: [{
						nftName: '创世',
						id: 1,
						imgSrc:'../../static/img/nft/eggplant.png'
					},
					{
						nftName: '无极',
						id: 2,
						imgSrc:'../../static/img/nft/potatoes.png'
					},
					{
						nftName: '天工',
						id: 3,
						imgSrc:'../../static/img/nft/greenApple.png'
					}
				]
			}
		},
		methods: {
			load() {
				this.$refs.uReadMore.init();
			},
			tabChange(item) {
				this.tabIndex = item.index
			}
		}
	}
</script>
<style lang="scss">
	.nft_container_bg {
		min-height: 100vh;
		background: $echo-nft-bg-color;

		.nftSpace {
			color: #fff;

			.user_card {
					padding: 0 40rpx;
					padding-bottom: 2rpx;
					background: url(../../static/img/nft/userSpace_header_bg.png) no-repeat ;
					background-size:cover;


					.user_info {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding-top: 140rpx;

						.user_avatar {
							width: 130rpx;
							height: 130rpx;
							border-radius: 50%;
							overflow: hidden;
							border: 2px solid #fff;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.user_conent {
							margin-left: 40rpx;
							flex-grow: 1;

							.user_title {
								font-size: 40rpx;
								margin-bottom: 10rpx;
							}

							.user_signature {
								font-size: 28rpx;
							}
						}
					}

					.user_introduce {
						margin: 40rpx 0;

						uni-rich-text {
							text-indent: 0em !important;
						}
					}
				}

				.fans {
					padding: 0 100rpx;
					padding-top: 40rpx;
					display: flex;
					justify-content: space-between;
					text-align: center;
					font-size: 28rpx;

					view {
						color: #999;
					}

					.num {
						color: #fff;
						margin-bottom: 20rpx;
					}
				}

				.focus {
					width: 400rpx;
					margin: 30rpx auto;
					margin-bottom: 10rpx;
				}

				.product_card {

					.nft_lists_card {
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;
						padding: 30rpx 30rpx;
					}
				}
			}
		}
</style>
